import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:imember/UI/InputPsw.dart';
import 'package:imember/UI/Notice.dart';
import 'package:imember/Util/Global.dart';
import 'package:imember/Util/MyColor.dart';
import 'package:imember/Util/PageUtil.dart';
import 'package:imember/Util/ToastUtil.dart';
import 'package:imember/Widget/MyButton.dart';
import 'package:imember/Widget/MyDialog.dart';
import 'package:imember/Widget/MyImage.dart';
import 'package:imember/Widget/MyInput.dart';

import 'OnlineOrder.dart';
import 'OrderRecord/OrderRecord.dart';
import 'Pay/Pay.dart';
import 'Printer.dart';
import 'Shipment/ShipmentManager.dart';
import 'Stock/StockManager.dart';
import 'Summary/SummaryManager.dart';
import 'Trip/TripManager.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeState();
  }
}

class HomeState extends State {
  List<String> goodsTypes = ["貢糖", "一口酥", "牛軋糖", "肉乾", "肉乾1", "肉乾2", "肉乾3"];
  int selectedIndex = 0;

  List<int> selectedGoods = [];
  bool showMenu = false;
  bool showNotice = false;
  bool showOrderNumberInput = false;

  switchMenu() {
    setState(() {
      showMenu = !showMenu;
    });
  }

  switchInput() {
    setState(() {
      showOrderNumberInput = !showOrderNumberInput;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: MyColor.White,
        body: Stack(
          children: [
            Container(
                width: double.infinity,
                child: Column(
                  children: [
                    Container(
                        padding: EdgeInsets.only(left: 20, right: 20),
                        height: 84,
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            LocalImage("ic_menu.png", width: 26, padding: EdgeInsets.all(20), onTap: switchMenu),
                            LocalImage("ic_logo.png", height: 38),
                            LocalImage("ic_notice.png", width: 26, padding: EdgeInsets.all(20), onTap: () {
                              showWidgetDialog(context, Notice(onClose: () {}));
                            }),
                          ],
                        )),
                    Container(height: 2, color: MyColor.Orange),
                    Expanded(
                        child: Container(
                            padding: EdgeInsets.all(32),
                            child: Row(children: [
                              ///左側區域
                              Expanded(
                                  child: Column(
                                children: [
                                  Container(
                                      height: 55,
                                      child: ListView.builder(
                                          scrollDirection: Axis.horizontal,
                                          itemCount: goodsTypes.length,
                                          itemBuilder: (BuildContext context, int index) {
                                            return ItemGoodsType(goodsTypes[index], selected: selectedIndex == index, onTap: () {
                                              setState(() {
                                                selectedIndex = index;
                                              });
                                            });
                                          })),
                                  Expanded(
                                      child: GridView.builder(
                                          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                              crossAxisCount: 4, //横轴三个子widget
                                              childAspectRatio: 0.8 //宽高比为1时，子widget
                                              ),
                                          itemCount: 12,
                                          itemBuilder: (BuildContext context, int index) {
                                            return ItemGoods(onTap: () {
                                              setState(() {
                                                selectedGoods.add(1);
                                              });
                                            });
                                          }))
                                ],
                              )),

                              ///右側區域
                              Container(
                                width: 220,
                                margin: EdgeInsets.only(left: 24),
                                decoration: Global.getBoxBg(8, MyColor.F5),
                                child: Column(
                                  children: [
                                    Expanded(
                                        child: ListView.builder(
                                            itemCount: selectedGoods.length,
                                            itemBuilder: (BuildContext context, int index) {
                                              return ItemGoodsNumber(
                                                "豬腳貢糖 ( 全素 )",
                                                goodsPrice: "150",
                                                goodsNum: selectedGoods[index],
                                                onSubClick: () {
                                                  setState(() {
                                                    selectedGoods[index] -= 1;
                                                    if (selectedGoods[index] < 1) {
                                                      selectedGoods[index] = 1;
                                                    }
                                                  });
                                                },
                                                onAddClick: () {
                                                  setState(() {
                                                    selectedGoods[index] += 1;
                                                  });
                                                },
                                                onDelClick: () {
                                                  setState(() {
                                                    selectedGoods.removeAt(index);
                                                  });
                                                },
                                              );
                                            })),
                                    Container(height: 7),
                                    IconBtn("開始掃描", "ic_code_w.png",width: 190),
                                    Container(height: 7),
                                    Button("輸入訂單號碼",
                                        isBorderBg: true,
                                        radius: 22,
                                        height: 36,
                                        width: 190,
                                        bgColor: MyColor.Orange,
                                        fontSize: 16,
                                        onTap: switchInput),
                                    Container(
                                        decoration: Global.getBoxBg(8, MyColor.White),
                                        height: 182,
                                        margin: EdgeInsets.all(5),
                                        padding: EdgeInsets.all(20),
                                        child: Column(children: [
                                          Container(height: 10),
                                          Align(
                                              alignment: Alignment.centerLeft,
                                              child: Text("金額小計", style: TextStyle(fontSize: 16, color: MyColor.Orange))),
                                          Expanded(
                                              child: Align(
                                                  alignment: Alignment.centerRight,
                                                  child: Text("NT 150", style: TextStyle(fontSize: 29, color: MyColor.Orange)))),
                                          OrangeBtn("結帳",width: 178,height: 36,onTap: (){
                                            PageUtil().open(context, Pay());
                                          })
                                        ]))
                                  ],
                                ),
                              )
                            ]))),
                  ],
                )),
            Visibility(visible: showMenu, child: HomeMenu(onClose: switchMenu)),
            Visibility(visible: showOrderNumberInput, child: InputOrderNumber(onClose: switchInput)),
          ],
        ));
  }
}

class ItemGoodsType extends StatelessWidget {
  String text;
  bool selected;
  Function() onTap;

  ItemGoodsType(this.text, {required this.selected, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return Button(text,
        onTap: onTap,
        width: 120,
        height: 45,
        radius: 5,
        fontSize: 19,
        margin: EdgeInsets.all(5),
        bgColor: selected ? MyColor.Orange : MyColor.F5,
        fontColor: selected ? MyColor.White : MyColor.C70);
  }
}

class ItemGoods extends StatelessWidget {
  Function() onTap;

  ItemGoods({required this.onTap});

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.fromLTRB(8, 19, 8, 19),
        child: GestureDetector(
            onTap: onTap,
            child: Container(
                decoration: Global.getWhiteBg_shadow(0, MyColor.C9),
                padding: EdgeInsets.all(10),
                child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                  Expanded(child: NetImage(Global.netImage, fit: BoxFit.cover)),
                  Container(height: 8),
                  Text("海蘭酥(海苔肉鬆)", style: TextStyle(fontSize: 15, color: MyColor.C70))
                ]))));
  }
}

class ItemGoodsNumber extends StatelessWidget {
  String goodsName;
  String goodsPrice;
  int goodsNum;
  Function() onSubClick;
  Function() onAddClick;
  Function() onDelClick;

  ItemGoodsNumber(this.goodsName,
      {required this.goodsPrice, required this.goodsNum, required this.onSubClick, required this.onAddClick, required this.onDelClick});

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(20),
        child: Column(children: [
          Row(children: [
            Expanded(child: Text(goodsName, maxLines: 1, style: TextStyle(fontSize: 19, color: MyColor.C70))),
            Text("$goodsPrice", style: TextStyle(fontSize: 19, color: MyColor.C70)),
          ]),
          Container(height: 8),
          Row(children: [
            LocalImage("ic_num_sub.png", width: 10, padding: EdgeInsets.all(5), onTap: onSubClick),
            Container(
                width: 50,
                height: 20,
                decoration: Global.getBoxBg(10, MyColor.White),
                alignment: Alignment.center,
                child: Text("$goodsNum", style: TextStyle(fontSize: 13, color: MyColor.C70))),
            LocalImage("ic_num_add.png", width: 10, padding: EdgeInsets.all(5), onTap: onAddClick),
            Expanded(child: Align(alignment: Alignment.centerRight, child: LocalImage("ic_trash.png", width: 23, onTap: onDelClick)))
          ])
        ]));
  }
}

/// 菜單
class HomeMenu extends StatelessWidget {
  Function() onClose;

  HomeMenu({required this.onClose});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
            width: 258,
            color: MyColor.Orange,
            padding: EdgeInsets.only(top: 32, bottom: 22),
            child: Column(children: [
              NetImage(Global.netImage, width: 88, height: 88, radius: 44, fit: BoxFit.cover),
              Container(height: 28),
              Text("聖祖貢糖", style: TextStyle(fontSize: 19, color: MyColor.White)),
              Container(height: 30),
              Expanded(
                  child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ItemMenu("線上訂單　", "menu_online_order.png", onTap: () {
                    PageUtil().open(context, OnlineOrder());
                  }),
                  ItemMenu("開錢箱　　", "menu_open_moneybox.png", onTap: () {
                    PageUtil().open(context, InputPsw(InputPsw.MoneyBox));
                  }),
                  ItemMenu("訂單紀錄　", "menu_order_record.png", onTap: () {
                    PageUtil().open(context, OrderRecord());
                  }),
                  ItemMenu("出貨管理　", "menu_shipment_manager.png", onTap: () {
                    PageUtil().open(context, ShipmentManager());
                  }),
                  ItemMenu("小結／關帳", "menu_summary.png", onTap: () {
                    PageUtil().open(context, SummaryManager());
                  }),
                  ItemMenu("庫存盤點　", "menu_stock_manager.png", onTap: () {
                    PageUtil().open(context, StockManager());
                  }),
                  ItemMenu("行程管理　", "menu_trip_manager.png", onTap: () {
                    PageUtil().open(context, TripManager());
                  }),
                  ItemMenu("印表機設定", "menu_printer_setting.png", onTap: () {
                    PageUtil().open(context, Printer());
                  }),
                ],
              )),
              Button("登出", bgColor: MyColor.White, fontColor: MyColor.Orange, fontSize: 21, radius: 22, height: 36, width: 168)
            ])),
        Expanded(child: GestureDetector(onTap: onClose, child: Container(color: MyColor.C70_80)))
      ],
    );
  }
}

class ItemMenu extends StatelessWidget {
  String text;
  String icon;
  Function() onTap;

  ItemMenu(this.text, this.icon, {required this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: onTap,
        child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          LocalImage(icon, width: 24, height: 24),
          Container(width: 24),
          Text(text, style: TextStyle(fontSize: 20, color: MyColor.White))
        ]));
  }
}

///輸入訂單號碼

class InputOrderNumber extends StatefulWidget {
  Function() onClose;

  InputOrderNumber({required this.onClose});

  @override
  State<StatefulWidget> createState() {
    return InputOrderNumberState();
  }
}

class InputOrderNumberState extends State<InputOrderNumber> {
  String inputValue = "";

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      GestureDetector(onTap: widget.onClose, child: Container(color: MyColor.C70_80)),
      Positioned(
          right: 299,
          top: 230,
          child: Container(
              width: 244,
              decoration: Global.getBoxBg(8, MyColor.Orange),
              padding: EdgeInsets.fromLTRB(25, 40, 25, 25),
              child: Column(children: [
                Container(
                    height: 44,
                    padding: EdgeInsets.only(left: 12, right: 12),
                    decoration: Global.getWhiteBg(22),
                    alignment: Alignment.center,
                    child: NormalInput(inputType: NormalInput.Number)),
                Container(height: 25),
                // Row(children: [
                //   Expanded(child: TextBtn("7", style: TextStyle(fontSize: 36, color: MyColor.White), onTap: () {})),
                //   Expanded(child: TextBtn("8", style: TextStyle(fontSize: 36, color: MyColor.White), onTap: () {})),
                //   Expanded(child: TextBtn("9", style: TextStyle(fontSize: 36, color: MyColor.White))),
                // ]),
                // Container(height: 20),
                // Row(children: [
                //   Expanded(child: TextBtn("4", style: TextStyle(fontSize: 36, color: MyColor.White), onTap: () {})),
                //   Expanded(child: TextBtn("5", style: TextStyle(fontSize: 36, color: MyColor.White))),
                //   Expanded(child: TextBtn("6", style: TextStyle(fontSize: 36, color: MyColor.White))),
                // ]),
                // Container(height: 20),
                // Row(children: [
                //   Expanded(child: TextBtn("1", style: TextStyle(fontSize: 36, color: MyColor.White), onTap: () {})),
                //   Expanded(child: TextBtn("2", style: TextStyle(fontSize: 36, color: MyColor.White))),
                //   Expanded(child: TextBtn("3", style: TextStyle(fontSize: 36, color: MyColor.White))),
                // ]),
                // Container(height: 20),
                // Row(children: [
                //   Expanded(child: TextBtn("0", style: TextStyle(fontSize: 36, color: MyColor.White), onTap: () {})),
                //   Expanded(child: TextBtn(".", style: TextStyle(fontSize: 36, color: MyColor.White))),
                //   Expanded(child: TextBtn("C", style: TextStyle(fontSize: 36, color: MyColor.White))),
                // ]),
                // Container(height: 24),
                Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
                  Button("取消",
                      height: 46,
                      width: 84,
                      radius: 23,
                      bgColor: MyColor.White,
                      fontColor: MyColor.Orange,
                      fontSize: 18,
                      onTap: widget.onClose),
                  Button("確認", height: 46, width: 84, radius: 23, bgColor: MyColor.White, fontColor: MyColor.Orange, fontSize: 18),
                ])
              ])))
    ]);
  }
}
